(function(){
   //假设大图片的高度用js写
   let leftbox=document.querySelector(".leftbox");//左侧盒子
   let rightbox=document.querySelector(".rightbox");//右侧盒子
   let mark=document.querySelector(".mark");//遮罩
   let bigimg=document.querySelector(".bigimg");//大图片

   function getwh(ele,style){
      return parseInt(window.getComputedStyle(ele)[style]);
   }

   //左侧盒子的高度和宽度
   let leftw=leftbox.offsetWidth;
   let lefth=leftbox.offsetHeight;

   //隐藏的盒子是无法求出offsetWidth/offsetHeight
   //右侧盒子的高度和宽度
   let rightw=getwh(rightbox,"width");
   let righth=getwh(rightbox,"height");
   
   //遮罩层的高宽
   let markw=getwh(mark,"width");
   let markh=getwh(mark,"height");
  
   //给大图片设置高宽
   bigimg.style.width=rightw/markw*leftw+"px";
   bigimg.style.height=righth/markh*lefth+"px";

   //移入 右侧盒子+遮罩层 显示
   leftbox.onmouseover=function(){
      mark.style.display="block";
      rightbox.style.display="block";
   }

   //移出 右侧盒子+遮罩层 隐藏
   leftbox.onmouseout=function(){
      mark.style.display="none";
      rightbox.style.display="none";
   }

   //最大移动宽度和高度
   let maxW=leftw-markw;
   let maxH=lefth-markh;
   //offsetY : 距离”目标元素“的顶部距离
   leftbox.onmousemove=function(e){
    // 最终坐标
     let resX=e.clientX-leftbox.offsetLeft-markw/2;
     let resY=e.clientY-leftbox.offsetTop-markh/2;

     //设置移动范围
     resX=resX<0?0:(resX>maxW?maxW:resX);
     resY=resY<0?0:(resY>maxH?maxH:resY);

     //红色遮罩移动
     mark.style.left=resX+"px";
     mark.style.top=resY+"px";

     //大图片移动
     bigimg.style.left="-"+rightw/markw*resX+"px";
     bigimg.style.top="-"+righth/markh*resY+"px";
   }

})()